<template>
    <section class="content">
        <header>
            <article>
                <img v-if="user_data.touxiang == null" src="~path_img/logo.png" alt="">
                <img v-else :src="user_data.touxiang"  alt="">

            </article>
<!--            <h6 v-if="user_data.openid == false" @click="clicl_login()">点击绑定微信</h6>-->
            <h6>{{user_data.username}}</h6>
        </header>
        <section class="list">
            <article>
                <p>姓 名</p>
                <span>{{user_data.username}}</span>
                <van-icon name="arrow" />
            </article>
            <article>
                <p>学 号</p>
                <span>{{user_data.xuehao}}</span>
                <van-icon name="arrow" />
            </article>
            <article>
                <p>密 码</p>
                <router-link to="/xiugaimima">修改密码</router-link>
                <van-icon name="arrow" />
            </article>
            <article>
                <p>性 别</p>
                <span v-if="user_data.sex != null">{{user_data.sex == 1?'男':'女'}}</span>
                <van-icon name="arrow" />
            </article>
            <article>
                <p>学 校</p>
                <span>{{user_data.xuexiao}}</span>
                <van-icon name="arrow" />
            </article>
            <article>
                <p>年 级</p>
                <span>{{user_data.nianji}}</span>
                <van-icon name="arrow" />
            </article>
            <article>
                <p>班 级</p>
                <span>{{user_data.banji}}</span>
                <van-icon name="arrow" />
            </article>
        </section>
        <div style="margin: 30px 16px;">
            <van-button round block type="info" color="#f5bb19" @click="jiebang()">解除绑定</van-button>
        </div>

        <div id="margin-bottom-div"></div>
        <Bottom></Bottom>
    </section>
</template>

<script>
    import {Dialog} from  "vant"
    import Bottom from "@/components/bottom"
    export default {
        name: "gerenxinxi",
        data() {
            return {
                user_data: []
            }
        },
        components: {
            Bottom,
            [Dialog.name]: Dialog
        },
        mounted() {
            this.get_data()
        },
        methods: {
            clicl_login(){
                ///重新授权
                window.location.href = this.$https.wx_url
            },
            get_data(){
                this.$https.fetchGet('gerenzhongxin',{}).then(res => {
                    this.user_data = res.data
                })
            },
            jiebang() {
                Dialog({ message: '您可以联系管理员，告知您的学号、姓名，管理员确认无误后，给您解除绑定。' })
            }
        }
    }
</script>

<style scoped lang="less">
    .content{
        background-color: #fff;
        height: 100%;
        header{
            height: 342px;
            background: url("~path_img/grzx-bj.jpg") center no-repeat;
            background-size: cover;
            padding-top: 40px;
            h6{
                padding: 10px 0;
                font-size: 16px;
                font-weight: normal;
                letter-spacing: 1px;
                color: #b78700;
                text-align: center;
                margin-bottom: 20px;
            }
            article{
                margin: 0 auto;
                border: rgba(255,255,255,.5) 1px solid;
                width: 110px;
                height: 110px;
                border-radius: 50%;
                padding: 10px;
                img{
                    border: rgba(255,255,255,.8) 1px solid;
                    padding: 10px;
                    width: 90px;
                    height: 90px;
                    border-radius: 50%;
                }
            }
        }
        .list{
            width: 92%;
            margin: -100px auto 0 auto;
            background-color: #fff;
            box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.2);
            border-radius: 10px;
            article{
                display: flex;
                font-size: .36rem;
                padding: .4rem .5rem;
                justify-content: space-between;
                color: #666;
                border-bottom: #e7e7e7 .01rem solid;
                align-items: center;
                p{
                    width: 50%;
                    text-align: left;
                }
                span,a{
                    width: 45%;
                    text-align: right;
                    padding-right: .1rem;
                }
                a{
                    color: #656aff;
                }
                i{
                    color: #666;
                }
            }

        }

    }
</style>
